<div class="am-cf am-padding-xs am-padding-bottom-0">
	<div class="am-fl am-cf">
		<strong class="am-text-primary am-text-lg">前端示例Layui</strong> / <small>表格示例</small>
	</div>
	<div class="am-fr am-cf">
		<button type="button" id="toAddBtn" class="am-btn am-btn-xs am-btn-primary" data-am-modal="{target: '#editModal'}">
			<i class="am-icon-edit"></i>&nbsp;一级操作
		</button>
	</div>
</div>
<hr class="am-margin-xs"/>
<form class="am-form am-form-horizontal am-margin-right-sm" role="form" id="queryForm">
	<ul class="am-avg-sm-1 am-avg-md-3 am-avg-lg-4 am-thumbnails">
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
				<label for="condition1" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">条件一：</label>
				<div class="am-u-sm-8 am-padding-left-0 am-padding-right-0">
					<input type="text" class="am-form-field" name="condition1" />
				</div>
			</div>
		</li>
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
				<label for="condition2" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">条件二：</label>
				<div class="am-u-sm-8 am-padding-left-0 am-padding-right-0">
					<select class="am-form-field" name="condition2">
						<option value="option1">选项一...</option>
						<option value="option2">选项二.....</option>
						<option value="option3">选项三........</option>
					</select>
				</div>
			</div>
		</li>
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
				<label for="condition2" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">时间条件：</label>
				<div class="am-u-sm-8 am-padding-left-0 am-padding-right-0">
					<input type="text" class="am-form-field" id="datepickerCondition" placeholder="选择时间" data-am-datepicker="{format: 'yyyy-mm-dd'}" />
				</div>
			</div>
		</li>
		<li class="am-padding-0">
			<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
				<div class="am-u-sm-12 am-padding-left-xs am-padding-right-0">
					<button type="button" id="queryBtn" class="am-btn am-btn-sm am-btn-primary"><i class="am-icon-search"></i>&nbsp;查询</button>
					<button type="reset" class="am-btn am-btn-sm am-btn-default"><i class="am-icon-undo"></i>&nbsp;重置</button>
				</div>
			</div>
		</li>
	</ul>
</form>
<hr class="am-margin-xs am-margin-top-0"/>
<div class="am-u-sm-12 am-padding-xs am-padding-top-0">
	<div class="am-scrollable-horizontal">
		<table class="am-table am-table-bordered am-table-striped am-table-hover am-table-compact am-text-nowrap am-table-centered am-margin-bottom-xs">
			<thead>
				<tr>
					<th>列一</th>
					<th>列二</th>
					<th>列三</th>
					<th>列四</th>
					<th>列五</th>
					<th>列六</th>
					<th>操作</th>
				</tr>
				<tr class="am-hide" id="tableTmpl">
					<td>{{col1}}</td>
					<td>{{col2}}</td>
					<td>{{col3}}</td>
					<td>{{col4}}</td>
					<td>{{col5}}</td>
					<td>{{col6}}</td>
					<td>
						<div class="am-btn-toolbar">
							<div class="am-btn-group am-btn-group-xs">
								<button type="button" class="am-btn am-btn-xs am-btn-primary toEdit"><i class="am-icon-edit"></i>&nbsp;修改</button>
								<button type="button" class="am-btn am-btn-xs am-btn-primary toEnable"><i class="am-icon-bell-o"></i>&nbsp;启用</button>
								<button type="button" class="am-btn am-btn-xs am-btn-primary toDisable"><i class="am-icon-bell-slash-o"></i>&nbsp;禁用</button>
								<button type="button" class="am-btn am-btn-xs am-btn-danger toDelete"><i class="am-icon-trash-o"></i>&nbsp;删除</button>
							</div>
						</div>
					</td>
				</tr>
			</thead>
			<tbody id="tableBody">
				
			</tbody>
		</table>
		<div id="pagingDiv"></div>
	</div>
</div>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="editModal">
	<div class="am-modal-dialog">
		<div class="am-modal-hd">编辑
			<a href="javascript:void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
		</div>
		<div class="am-modal-bd">
			<hr/>
			<form class="am-form am-form-horizontal am-margin-right-sm" role="form" id="editForm">
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="attr1" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0"><span class="am-text-danger">*</span>属性一：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="text" class="am-form-field vfor" name="attr1" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="attr2" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0"><span class="am-text-danger">*</span>属性二：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<input type="text" class="am-form-field vfor" name="attr2" />
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="attr3" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">属性三：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<textarea class="am-form-field vfor" rows="3" cols="" name="attr3"></textarea>
					</div>
				</div>
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs">
					<label for="attr4" class="am-u-sm-4 am-form-label am-text-right am-padding-left-0 am-padding-right-0">属性四：</label>
					<div class="am-u-sm-6 am-padding-left-0 am-padding-right-0 am-u-end">
						<label class="am-radio-inline">
							<input type="radio" name="attr4" value="1" data-am-ucheck checked="checked"> 正常
						</label>
						<label class="am-radio-inline">
							<input type="radio" name="attr4" value="2" data-am-ucheck> 禁用
						</label>
					</div>
				</div>
				<hr class="am-margin-xs" />
				<input type="hidden" class="vfor" name="id" />
				<div class="am-form-group am-form-group-sm am-margin-bottom-xs am-margin-top-lg">
					<div class="am-u-sm-offset-1 am-u-sm-10 am-padding-left-0 am-padding-right-0 am-u-end">
						<button type="button" class="am-btn am-btn-sm am-btn-primary" id="saveBtn">
							<i class="am-icon-save"></i>&nbsp;确定
						</button>
						<button type="button" class="am-btn am-btn-sm am-btn-default" data-am-modal-close>
							<i class="am-icon-undo"></i>&nbsp;返回
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<script>
(function() {
	$('#saveBtn').on('click', function(){
		layer.msg('保存');
		$('#editModal').modal('close');
	});
	
	$('#editModal').on('close.modal.amui', function(){
		$('#editForm').resetForm();
	});
	
	$('#queryBtn').on('click', function(){
		query(1, 10);
	});
	
	function query(page, size){
		$('#queryForm').trimForm();
		var page = page || 1;
		var size = size || 10;
		
		var data = {
			count: 100,
			list: [{
				col1: '数据列一',
				col2: '数据列二',
				col3: '数据列三',
				col4: '数据列四',
				col5: '数据列五',
				col6: '数据列六'
			}, {
				col1: '数据列一',
				col2: '数据列二',
				col3: '数据列三',
				col4: '数据列四',
				col5: '数据列五',
				col6: '数据列六'
			}, {
				col1: '数据列一',
				col2: '数据列二',
				col3: '数据列三',
				col4: '数据列四',
				col5: '数据列五',
				col6: '数据列六'
			}]
		}
		$('#tableBody').empty();
		if(data.count < 1){
			$('#tableBody').append('<tr><td colspan="7">没有查询到符合条件的数据</td></tr>');
			return false;
		}
		for(var i=0; i<data.list.length; i++){
			$('#tableBody').append('<tr>' + $.format($('#tableTmpl').html(), data.list[i]) + '</tr>');
			$('#tableBody tr:last').data('obj', data.list[i]);
		}
		
		$('#pagingDiv').paging({
			page: page,
			pageSize: size,
			totalPage: data.count == 0 ? 1 : Math.ceil(data.count/size),
			totalCount: data.count,
			callback: query
		});
	}
	
	$('#tableBody').on('click', '.toEdit', function(){
		var data = $(this).parents('tr').data('obj');
		$('#editModal').modal('open');
	});
	
	$('#tableBody').on('click', '.toEnable', function(){
		var data = $(this).parents('tr').data('obj');
		layer.confirm('是否要启用[' + data.name + ']？', {icon: 3, title:'提示'}, function(index){
			layer.close(index);
		});
	});
	
	$('#tableBody').on('click', '.toDisable', function(){
		var data = $(this).parents('tr').data('obj');
		layer.confirm('是否要禁用[' + data.name + ']？', {icon: 3, title:'提示'}, function(index){
			layer.close(index);
		});
	});
	
	$('#tableBody').on('click', '.toDelete', function(){
		var data = $(this).parents('tr').data('obj');
		layer.confirm('是否要删除[' + data.name + ']？', {icon: 3, title:'提示'}, function(index){
			layer.close(index);
		});
	});
	
	query(1, 10);
	$('#datepickerCondition').datepicker().on('changeDate.datepicker.amui', function(event) {
		$('#datepickerCondition').val(event.target.defaultValue);
	});
})();
</script>
</body>
</html>
